<template>
  <div>
    <el-button type="primary" @click="saveContract()">提交审批</el-button>
    <h1 style="text-align:center">材料合同</h1>
    <el-form :inline="true" v-model="contractData">
      <el-form-item label="所属项目">
        <el-input v-model="contractData.projectName" readonly @focus="projectDialog=true"></el-input>
      </el-form-item>
      <el-form-item label="合同名称">
        <el-input v-model="contractData.contractName"></el-input>
      </el-form-item>
      <el-form-item label="合同类型">
        <el-select v-model="contractData.contractType">
          <el-option label="材料合同" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供货商">
        <el-input v-model="contractData.providerId"></el-input>
      </el-form-item>
      <el-form-item label="签订人">
        <el-input v-model="contractData.contractSignatory"></el-input>
      </el-form-item>
      <el-form-item label="开始日期">
        <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="contractData.startDate"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="contractData.endDate"></el-date-picker>
      </el-form-item>
      <el-form-item label="工程工期">
        <el-input v-model="contractData.projectPeriod"></el-input>
      </el-form-item>
      <el-form-item label="合同金额">
        <el-input v-model="contractData.contractAmount"></el-input>
      </el-form-item>
      <el-form-item label="预付款">
        <el-input v-model="contractData.advancePay"></el-input>
      </el-form-item>
      <el-form-item label="保证金">
        <el-input v-model="contractData.depositAmount"></el-input>
      </el-form-item>
      <el-form-item label="付款方式">
        <el-select v-model="contractData.paymentType">
          <el-option label="现金" value="现金"></el-option>
          <el-option label="转账" value="转账"></el-option>
          <el-option label="支票" value="支票"></el-option>
          <el-option label="微信" value="微信"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算方式">
        <el-select v-model="contractData.settleType">
          <el-option label="分段结算" value="分段结算"></el-option>
          <el-option label="合同结算" value="合同结算"></el-option>
          <el-option label="进度结算" value="进度结算"></el-option>
          <el-option label="竣工后一次结算" value="竣工后一次结算"></el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="24">
          <el-form-item label="付款条件">
            <el-input type="textarea" style="width:800px" v-model="contractData.paymentCondition"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="主要条款">
            <el-input type="textarea" style="width:800px" v-model="contractData.mainTerm"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input type="textarea" style="width:800px" v-model="contractData.comment"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <el-form>
      <el-button @click="addrow()" v-if="rownum<11">增行</el-button>
      <el-button @click="decreaserow()" v-if="rownum>1">删行</el-button>
      <el-row style="text-align:center">
        <el-col :span="4"><div class="borderDiv">材料名称</div></el-col>
        <el-col :span="4"><div class="borderDiv">规格型号</div></el-col>
        <el-col :span="4"><div class="borderDiv">单位</div></el-col>
        <el-col :span="4"><div class="borderDiv">采购数量</div></el-col>
        <el-col :span="4"><div class="borderDiv">采购价格</div></el-col>
        <el-col :span="4"><div class="borderDiv">税率(%)</div></el-col>
      </el-row>
      <el-row v-for="index of rownum" :key="index">
        <el-col :span="4"><div class="borderDiv"><el-input readonly @focus="materialDialog=true;selectedBatchRow=index-1" v-model="batchData[index-1].materialName">
        </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input readonly
        @focus="materialDialog=true;selectedBatchRow=index-1" v-model="batchData[index-1].unitModel">
        </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input readonly
        @focus="materialDialog=true;selectedBatchRow=index-1" v-model="batchData[index-1].unit">
        </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input v-model="batchData[index-1].buyCount">
          </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input v-model="batchData[index-1].buyPrice"></el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input v-model="batchData[index-1].taxPercent"></el-input></div></el-col>
      </el-row>
    </el-form>

    <el-dialog :visible.sync="projectDialog" width="80%">
      <ProjectInfoList @row="getProjectRow"></ProjectInfoList>
    </el-dialog>
    <el-dialog :visible.sync="materialDialog" width="80%">
      <MaterialList @row="getMaterialRow"></MaterialList>
    </el-dialog>
  </div>
  
</template>
<script>
import ProjectInfoList from "../common/projectInfo/ProjectInfoList"
import MaterialList from "../common/material/MaterialList"
import MaterialContractModel from "../../model/lyz/MaterialContractModel"
const MCM=MaterialContractModel.getInstance();
export default{
  components:{
    ProjectInfoList,
    MaterialList
  },
  data(){
    return{
      contractData:{},//合同数据
      batchData:[{}],//细节数据
      projectDialog:false,//显示项目的对话框
      materialDialog:false,//材料对话框
      rownum:1,//添加材料需求的行数
      selectedBatchRow:0,//选中的批量添加行
    }
  },
  created(){

  },
  methods:{
    getProjectRow(row){
      this.projectDialog=false;
      this.contractData.pId=row.id;
      this.contractData.projectName=row.projectName;
    },
    getMaterialRow(row){
      this.batchData[this.selectedBatchRow].materialName=row.materialName;
      this.batchData[this.selectedBatchRow].mateTypeId=row.id;
      this.batchData[this.selectedBatchRow].unitModel=row.unitModel;
      this.batchData[this.selectedBatchRow].unit=row.unit;
      this.batchData[this.selectedBatchRow].price=row.price;
      this.materialDialog=false;
    },
    addrow(){//添加一行
      this.batchData.push({});
      this.rownum++;      
    },
    decreaserow(){//减少一行
      this.batchData.pop();
      this.rownum--;
    },
    saveContract(){
      MCM.saveMaterialContract(this.contractData,this.batchData);
    }
  }
}
</script>